<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
	<head>
		<meta charset="utf-8">
		<title>管理员展示</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	</head>
<body class="layui-layout-body">
	<!--添加表格表单  start ---------->
	`   <form class="layui-form" id="addForm"  style="display: none;padding: 5px 20px 0px  0px">
		<div class="layui-form-item">
			<label class="layui-form-label">管理员名</label>
			<div class="layui-input-block">
				<input type="text" name="username" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">管理员密码</label>
			<div class="layui-input-block">
				<input type="text" name="password" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<!----------添加表格表单  end  --------->


	<!--修改表格表单  start ---------->
	<form class="layui-form" id="updateForm" lay-Filter="updateFormFilter" style="display: none;padding: 5px 20px 0px  0px">

		<div class="layui-form-item">
			<label class="layui-form-label">管理员名</label>
			<div class="layui-input-block">
				<input type="hidden" name="id" >
				<input type="text" name="username" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">管理员密码</label>
			<div class="layui-input-block">
				<input type="text" name="password" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<!----------修改表格表单  end  --------->

	<div>
		<button id="deleteAll" class="layui-btn">删除选中</button>
		<button id="add" class="layui-btn">添加</button>
	</div>

		<table id="demo" lay-filter="tableFilter"></table>


	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>

	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

	<script>

		layui.use(['table','form','layer'], function(){
			var table = layui.table;
			var form=layui.form;
			var layer=layui.layer;
			table.render({
				elem: '#demo'
				,height: 312
				,url:'${pageContext.request.contextPath}/admin/selectAll' //数据接口
				,page: true //开启分页
				,limit: 1
				,limits:[1,2]
				,cols: [[ //表头
					{type:'checkbox', fixed: 'left'}
					,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
					,{field: 'username', title: '管理员用户名', width:120}
					,{field: 'password', title: '管理员密码', width:120, sort: true}
					,{title:'操作',toolbar:'#barDemo'}
				]]

			});

			$("#add").click(function () {
				layer.open({
					type:1
					,title:'添加页面'
					,content:$("#addForm")
				})
			})


			//-----添加功能  start------

			//监听提交
			form.on('submit(addSubmit)', function(data){
				layer.msg(JSON.stringify(data.field));
				$.ajax({
					url:'${pageContext.request.contextPath}/admin/insert'
					,data:$("#addForm").serialize()
					,success:function(result){
						if(result.flag){
							layer.closeAll();//关闭添加界面的弹出层
							$("#addForm")[0].reset();//使用js中的reset方法清空表单中的数据
							layer.msg("添加成功!!!!");
							table.reload("demo")//重载表格
						}else{
							layer.msg("添加异常!!!!")
						}
					}
				})
				return false;
			});
			//------添加功能end-----


			//table事件监听器  控制监听  编辑和删除
			table.on('tool(tableFilter)',function (obj) {
				var data=obj.data;

				console.log(data)
				if (obj.event=='edit'){
					layer.open({
						type:1
						,title:'修改页面'
						,content:$("#updateForm")

					})

					$.ajax({
						url:'${pageContext.request.contextPath}/admin/selectOne'
						,data:'id='+obj.data.id
						,dataType:'json'
						,success:function (result) {

							form.val('updateFormFilter',result)
						}
					})
				}else if(obj.event=='del'){
					layer.confirm('确定要删除吗,亲!',function (index) {
						$.ajax({
							url:'${pageContext.request.contextPath}/admin/delete'
							,data:'id='+obj.data.id
							,dataType:'json'
							,success:function (result) {
								if(result.flag){
									layer.msg('删除成功');
									table.reload('demo');
								}
							}
						})
						layer.close(index);
					})

				}
			});


			//---修改功能  start------
			form.on('submit(updateSubmit)', function(data){
				layer.msg(JSON.stringify(data.field));
				$.ajax({
					url:'${pageContext.request.contextPath}/admin/update'
					,data:$("#updateForm").serialize()
					,dataType:'json'
					,success:function(result){
						if(result.flag){

							//隐藏修改弹出层
							layer.closeAll();
							//提示修改层
							layer.msg("修改成功!!!!");
							//表格重载
							table.reload("demo")
						}
					}
				})
				return false;
			});
			//    ------修改功能结束--------

		})

	</script>
</body>
</html>